<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="peoject-name">
					<view class="left">创优目标：{{name}}</view>
				</view>
				<view class="peoject-situation" v-for="item in pageList" :key='item.id'>
					<view class="one">
						<view class="oneTop">
							<view class="situation">{{item.name}}</view>
							<view class="situationone">{{item.air+'/'+item.total}}</view>
							<view :class="item.air !== item.total ? 'image':'images'" />
						</view>
						<view class="situationItem">
							<view class="item" v-for="age in item.children" :key='age.childName'>
								<view :class="age.status == 1  ? 'images' : 'image'" />
								<view class="">
									{{age.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ExcellencePlanfileList,
		ExcellencePlanCommentList,
		ExcellencePlanBasicConditionList
	} from '@/api/project.js'
	export default {
		data() {
			return {
				id: '',
				name: '',
				bules: false, //全部条件的变量
				pageList: [{
						id: 1,
						name: '专项评价完成情况:',
						total: '',
						air: '',
						children: []
					},
					{
						id: 2,
						name: '合规性文件清单:',
						total: '',
						air: '',
						children: []
					},
					{
						id: 3,
						name: '申报基本条件:',
						total: '',
						air: '',
						children: []
					}
				],
				progress:{},
				cresda:{name:'获得省部级科技进步奖、质量管理小组活动成果',status:0},
			};
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = JSON.parse(option.params).id
			this.name = JSON.parse(option.params).project_name;
			this.pageList[0].total=JSON.parse(option.params).comment_total
			this.pageList[0].air=JSON.parse(option.params).comment_now
			this.pageList[1].total=JSON.parse(option.params).file_total
			this.pageList[1].air=JSON.parse(option.params).file_now
			this.pageList[2].total=JSON.parse(option.params).basic_condition_total
			this.pageList[2].air=JSON.parse(option.params).basic_condition_now
			ExcellencePlanCommentList({detail_id:this.id}).then(res=>{
				this.pageList[0].children=res.data.data
				this.pageList[0].children.forEach(item=>{
					if(item.detail){
						item.status=1
					}
				})
			})
			ExcellencePlanfileList({detail_id:this.id}).then(res=>{
				this.pageList[1].children=res.data.data
			})
			ExcellencePlanBasicConditionList({detail_id:this.id}).then(res=>{
				this.pageList[2].children=res.data.data
			})
			// for(var i = 0; i<this.pageList[2].total;i++){
			// 	this.pageList[2].children.push(this.cresda)
			// }
			// for(let k=0; k<this.pageList[2].air;k++){
			// 	// console.log(this.pageList[2].children[k]);
			// 	this.pageList[2].children[k].status=1
			// }
			// console.log(this.pageList[1]);
		}
	}
</script>

<style lang="scss" scoped>
	.section-0 {
		width: 100%;
		background-color: #3a5df5;

		.section-body {
			box-sizing: border-box;
			width: 100%;
			padding: 50rpx 40rpx 100rpx 40rpx;
			background-color: #fff;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;

			.peoject-name {
				display: flex;
				align-items: center;
				justify-content: space-around;
				line-height: 100%;
				height: 150rpx;
				border-radius: 50rpx;
				font-size: 35rpx;
				color: #46464A;
				font-family: SourceHanSansCN-Regular;
				font-weight: 600;
				color: #46464A;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);

				.left {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				// .right {
				// 	height: 50rpx;
				// 	width: 150rpx;
				// 	line-height: 50rpx;
				// 	text-align: center;
				// 	border-radius: 50rpx;
				// 	background-color: #0535d6;
				// 	color: #fff;
				// 	font-size: 28rpx;
				// 	font-weight: 400;
				// }

			}

			.peoject-situation {
				width: 100%;
				background-color: #fff;
				border-radius: 50rpx;
				margin-top: 50rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding-top: 40rpx;
				padding-bottom: 30rpx;
				.one {
					margin: 0 20rpx 0 20rpx;
					.oneTop {
						display: flex;
						align-items: center;
						.situation {
							color: #46464A;
							font-size: 35rpx;
							font-weight: 700;
						}
					}

					.situationone {
						margin-left: 25rpx;
						margin-right: 10rpx;
						color: #1534ce;
						font-weight: 700;
					}

					.situationItem {
						margin-top: 20rpx;
						border-radius: 20rpx;
						background-color: #efefef;
						overflow-y: scroll;
						.item {
							display: flex;
							font-size: 26rpx;
							align-items: center;
							padding: 5rpx 0 5rpx 5rpx ;
						}
					}
				}
			}

			.images {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-size: cover;
				background-image: url(../../../../src/imgs/evaluate_d.png);
				margin-left: 10rpx;
				margin-right: 10rpx;
			}

			.image {
				margin-left: 10rpx;
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-size: cover;
				background-image: url(../../../../src/imgs/evaluate_c.png);
			}
		}
	}
</style>
